<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给角色设置权限</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--引入样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div id="app">



    <div class="content-header">
        <h1>管理<small>角色权限管理</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>设置</el-breadcrumb-item>
            <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色权限管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <el-button type="primary" @click="goBack()">返回</el-button>

    <el-row v-for="list in resourceList" style="margin-bottom: 20px">
        <el-checkbox indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"></el-checkbox>
        <span>{{list.resName}}</span>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedResources" @change="handleCheckedResourcesChange">
            <el-checkbox v-for="item in list.children" :label="item.resId" :key="item.resId">
                {{item.resName}}
            </el-checkbox>
        </el-checkbox-group>
    </el-row>

    <div>
        <el-button type="primary" @click="save()">保存</el-button>
    </div>







</div>
</body>
<!--引入组件库-->
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script src="/js/util.js"></script>

<script>
    new Vue({
        el:"#app",
        data(){
            return{
                resourceList:{},//查询的所有权限集合
                checkAll: false,
                checkedResources: [],//所选择的权限数组
                // resources: resourcesOptions,
                isIndeterminate: false


            }



        },
        created(){
            this.fetchData();


        },
        methods:{
            fetchData(){

                axios.get(`/resource/findAllResources.do`).then(response=>{
                    this.resourceList=response.data;
                });

                axios.get(`/resource/findResourceByRoleId.do?roleId=`+getQueryString("roleId")).then(response=>{
                    this.checkedResources=response.data;
                });
            },
            save(){
               axios.post(`/resource/saveResources.do?roleId=`+getQueryString("roleId"),this.checkedResources).then(response=>{
                    if(response.data.code==0){
                        this.$alert('设置成功','页面提示');
                        location.href="/system/role.html";
                    }else{
                        this.$alert('设置失败','页面提示');
                    }
               })
            },
            goBack(){
                location.href="/system/role.html";
            },
            //下面两个和全选有关
            handleCheckAllChange(val) {
                // this.checkedResources = val ? resourcesOptions : [];
                // this.isIndeterminate = false;
            },
            handleCheckedResourcesChange(value) {
                // let checkedCount = value.length;
                // this.checkAll = checkedCount === this.cities.length;
                // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            }







        }



    })


</script>
</html>